<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <base href="${pageContext.request.contextPath}/">
    <link type="text/css" href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link type="text/css" href="bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link type="text/css" href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
</head>
<body>

<!-- ===============创建用户的模态窗口==================== -->
<div class="modal fade" id="saveWindow" role="dialog">
    <div class="modal-dialog" role="document" style="width: 90%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">新增用户</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form" id="saveForm">

                    <div class="form-group">
                        <label for="create-loginAct" class="col-sm-2 control-label">登录帐号<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-loginAct">
                            <strong id="message" style="color: red"></strong>
                        </div>
                        <label for="create-name" class="col-sm-2 control-label">用户姓名<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create-loginPwd" class="col-sm-2 control-label">登录密码<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="password" class="form-control" id="create-loginPwd">
                        </div>
                        <label for="create-confirmPwd" class="col-sm-2 control-label">确认密码<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="password" class="form-control" id="create-confirmPwd">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create-email" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-email">
                        </div>
                        <div class="input-group date myD">

                        </div>
                        <label for="create-expireTime" class="col-sm-2 control-label">失效时间</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control date myDateTime" id="create-expireTime"
                                   placeholder="失效时间" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create-lockState" class="col-sm-2 control-label">锁定状态<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="create-lockState">
                                <option value="1">启用</option>
                                <option value="0">锁定</option>
                            </select>
                        </div>
                        <label for="create-deptNo" class="col-sm-2 control-label">部门<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-deptNo" placeholder="部门名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create-allowIps" class="col-sm-2 control-label">允许访问的IP</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-allowIps" style="width: 280%"
                                   placeholder="允许访问的IP">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="save()">保存</button>
            </div>
        </div>
    </div>
</div>
<!--====================================================-->

<!-- ===============修改用户的模态窗口==================== -->
<div class="modal fade" id="editWindow" role="dialog">
    <div class="modal-dialog" role="document" style="width: 90%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">编辑用户</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form" id="editForm">
                    <input type="hidden" id="update-id">
                    <div class="form-group">
                        <label for="update-loginAct" class="col-sm-2 control-label">登录帐号<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="update-loginAct">
                        </div>
                        <label for="update-name" class="col-sm-2 control-label">用户姓名<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="update-name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="update-email" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="update-email">
                        </div>
                        <label for="update-expireTime" class="col-sm-2 control-label">失效时间</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control date myDateTime" id="update-expireTime"
                                   placeholder="失效时间" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="update-lockState" class="col-sm-2 control-label">锁定状态<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="update-lockState">
                                <option value="1">启用</option>
                                <option value="0">锁定</option>
                            </select>
                        </div>
                        <label for="update-deptNo" class="col-sm-2 control-label">部门<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="update-deptNo" placeholder="部门名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="update-allowIps" class="col-sm-2 control-label">允许访问的IP</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="update-allowIps" style="width: 280%"
                                   placeholder="允许访问的IP">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="edit()">保存</button>
            </div>
        </div>
    </div>
</div>
<!--====================================================-->

<!--======================顶部导航栏==============================-->
<ol class="breadcrumb">
    <li><a href="settings/index" target="_parent">系统设置设置</a></li>
    <li><a href="settings/qx/index" target="_parent">权限管理</a></li>
    <li class="active">用户维护</li>
</ol>

<!--======================查询系列组件==============================-->
<div class="well well-sm" style="height: 54px; left:12px; width: 98.4%;">
    <form class="form-inline" id="searchForm">
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">用户姓名</div>
                <input class="form-control" type="text" placeholder="用户姓名" id="name">
            </div>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">部门名称</div>
                <input class="form-control" type="text" placeholder="部门编号" id="deptNo">
            </div>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">锁定状态</div>
                <select id="lockState" class="form-control">
                    <option value="">不选择</option>
                    <option value="1">启用</option>
                    <option value="0">锁定</option>
                </select>
            </div>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">失效时间范围</div>
                <input type="text" class="form-control myDateTime" id="startTime" placeholder="起始时间" readonly>
            </div>
        </div>

        ~

        <div class="form-group">
            <div class="input-group">
                <input type="text" class="form-control myDateTime" id="endTime" placeholder="结束时间" readonly>
            </div>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button type="button" class="btn btn-default" onclick="$('#tab').bootstrapTable('refresh');"><span
                class="glyphicon glyphicon-search"></span> 查询
        </button>
        &nbsp;
        <button type="button" class="btn btn-default"
                onclick="$('#searchForm')[0].reset();$('#tab').bootstrapTable('refresh');"><span
                class="glyphicon glyphicon-refresh"></span> 清空
        </button>
    </form>
</div>


<!--======================增加删除组件==============================-->
<div class="btn-toolbar" role="toolbar"
     style="background-color: #F7F7F7; height: 50px; position: relative;left: 10px; width: 98%; top: 20px;">
    <div class="btn-group" style="position: relative; top: 18%;">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#saveWindow"><span
                class="glyphicon glyphicon-plus"></span> 创建用户
        </button>
        <button type="button" class="btn btn-danger" onclick="removeBatch()"><span
                class="glyphicon glyphicon-minus"></span> 批量删除
        </button>
    </div>
</div>

<div style="position: relative; left: 10px; top: 40px; width: 98%">
    <table id="tab" class="table table-hover table-striped"></table>
</div>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="bootstrap-table/locale/bootstrap-table-zh-CN.min.js "></script>
<script type="text/javascript" src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
    $(function () {
        initTable();

        // 日期框初始化
        $('.myDateTime').datetimepicker({
            language: 'zh-CN',
            // 日期格式化
            format: 'yyyy-mm-dd hh:ii:ss',
            // 一周的起始
            weekStart: 1,
            // 选择日期后自动关闭
            autoclose: true,
            // 默认显示月历
            startView: 'month',
            // 是否显示今天按钮
            todayBtn: true,
            forceParse: false
        });
        $('#saveWindow').on('hidden.bs.modal', function () {
            $('#saveForm')[0].reset();
        });
        $('#editWindow').on('hidden.bs.modal', function () {
            $('#editForm')[0].reset();
        });
    })
    // 新增用户模态框   用户名组件 验证是否已存在  blur失去焦点
    $('#create-loginAct').blur(function () {
        var loginAct = $('#create-loginAct').val()
        selectAct(loginAct)
    });
    // 获取焦点
    $('#create-loginAct').focus(function () {
        $('#message').html("");
    });

    // 表格初始化
    function initTable() {
        //调用配置异步表格的方法
        $('#tab').bootstrapTable({
            //=========== 表格配置项===============
            // http 请求方式
            method: 'get',
            // 请求路径
            url: 'user/page',
            // 开启分页
            pagination: true,
            // 设置分页的位置 server 服务器端分页  local 前端分页
            sidePagination: 'server',
            // 设置每页条数
            pageSize: 3,
            // 设置每页条数列表
            pageList: [5, 10, 20, 50],
            paginationPreText: '上一页',
            paginationNextText: '下一页',
            // 查询时的参数
            queryParamsType: '',
            queryParams: function (params) {
                // 获取自定义的请求参数
                params.name = $('#name').val();
                params.deptNo = $('#deptNo').val()
                params.lockState = $('#lockState').val();
                params.startTime = $('#startTime').val();
                params.endTime = $('#endTime').val();
                return params;
            },
            // 处理响应的格式
            responseHandler: function (res) {
                if (res.code == 0) {
                    // 如果开启分页
                    return {
                        rows: res.data.list,
                        total: res.data.total
                    }
                }
            },
            // 表各种的列元素描述
            columns: [
                {
                    //复选框
                    checkbox: true
                }, {
                    // 列数据: 数据从对象中获取
                    field: 'id',
                    visible: false
                }, {
                    title: '登录账号',
                    field: 'loginAct',
                    halign: 'center'
                }, {
                    title: '用户姓名',
                    field: 'name',
                    halign: 'center'
                }, {
                    //列名
                    title: '邮箱',
                    field: 'email',
                    halign: 'center'
                }, {
                    //列名
                    title: '部门',
                    field: 'deptNo',
                    halign: 'center'
                }, {
                    title: '失效时间',
                    field: 'expireTime',
                    halign: 'center'
                }, {
                    title: '允许访问IP',
                    field: 'allowIps',
                    halign: 'center'
                }, {
                    title: '锁定状态',
                    field: 'lockState',
                    halign: 'center'
                }, {
                    title: '创建者',
                    field: 'createBy',
                    halign: 'center'
                }, {
                    title: '创建时间',
                    field: 'createTime',
                    halign: 'center'
                }, {
                    title: '修改者',
                    field: 'editBy',
                    halign: 'center'
                }, {
                    title: '修改时间',
                    field: 'editTime',
                    halign: 'center'
                }, {
                    title: '操作',
                    halign: 'center',
                    align: 'center',
                    formatter: function (value, row) {
                        return '<button type="button" class="btn btn-warning btn-sm"  onclick="openEdit(\'' + row.id + '\')"><span class="glyphicon glyphicon-edit"></span> 编辑</button>' +
                            '&emsp;' + '&emsp;' + '<button type="button" class="btn btn-danger btn-sm" onclick="remove(\'' + row.id + '\')"><span class="glyphicon glyphicon-remove"></span> 删除</button>';
                    }
                }
            ]
        });
    }

    // 新增
    function save() {
        $.ajax('user/save', {
            type: 'post',
            contentType: 'application/json',
            data: JSON.stringify({
                loginAct: $('#create-loginAct').val(),
                name: $('#create-name').val(),
                loginPwd: $('#create-loginPwd').val(),
                email: $('#create-email').val(),
                expireTime: $('#create-expireTime').val(),
                lockState: $('#create-lockState').val(),
                deptNo: $('#create-deptNo').val(),
                allowIps: $('#create-allowIps').val()
            }),
            beforeSend: function () {
                var loginAct = $('#create-loginAct').val();
                var name = $('#create-name').val();
                var loginPwd = $('#create-loginPwd').val();
                var confirmPwd = $('#create-confirmPwd').val();
                var lockState = $('#create-lockState')
                if (!loginAct) {
                    alert("未填写登录账号");
                    return false;
                }
                if (loginAct.length > 11) {
                    alert("登录账号长度超限");
                    return false;
                }
                if (!name) {
                    alert("未填写用户姓名");
                    return false;
                }
                if (name.length > 8) {
                    alert("用户姓名长度超限");
                    return false;
                }
                if (!loginPwd) {
                    alert("未填写登录密码");
                    return false;
                }
                if (loginPwd.length > 16) {
                    alert("登录密码长度超限");
                    return false;
                }
                if (confirmPwd != loginPwd) {
                    alert("两次输入密码的不一致");
                    return false;
                }
                if (lockState == null || lockState == '') {
                    alert("未选择锁定状态");
                    return false;
                }
            },
            success: function (res) {
                if (res.code == 0) {
                    alert("新增成功");
                    $('#tab').bootstrapTable('refresh');
                    $('#saveWindow').modal('hide');

                } else {
                    alert(res.message);
                }
            }
        })
    }

    // 查验新增账户名是否已存在
    function selectAct(loginAct) {
        $.ajax('user/findByLoginAct/' + loginAct, {
            type: 'get',
            success: function (res) {
                if (res.code == 0) {
                    if (res.data != null) {
                        $('#message').html("该账号已存在");
                    }
                }
            }
        })
    }

    // 打开修改
    function openEdit(id) {
        $.ajax('user/find/' + id, {
            type: 'get',
            success: function (res) {
                if (res.code == 0) {
                    $('#update-id').val(res.data.id);
                    $('#update-loginAct').val(res.data.loginAct);
                    $('#update-name').val(res.data.name);
                    $('#update-loginPwd').val(res.data.loginPwd);
                    $('#update-email').val(res.data.email);
                    $('#update-expireTime').val(res.data.expireTime);
                    $('#update-lockState').val(res.data.lockState);
                    $('#update-deptNo').val(res.data.deptNo);
                    $('#update-allowIps').val(res.data.allowIps);
                    // 打开窗体
                    $('#editWindow').modal('show');
                }
            }
        })
    }

    // 修改
    function edit() {
        $.ajax('user/edit', {
            type: 'put',
            contentType: 'application/json',
            data: JSON.stringify({
                id: $('#update-id').val(),
                loginAct: $('#update-loginAct').val(),
                name: $('#update-name').val(),
                email: $('#update-email').val(),
                expireTime: $('#update-expireTime').val(),
                lockState: $('#update-lockState').val(),
                deptNo: $('#update-deptNo').val(),
                allowIps: $('#update-allowIps').val()
            }),
            beforeSend: function () {
                var loginAct = $('#update-loginAct').val();
                var name = $('#update-name').val();
                var lockState = $('#update-lockState')
                if (!loginAct) {
                    alert("未填写登录账号");
                    return false;
                }
                if (loginAct.length > 11) {
                    alert("登录账号长度超限");
                    return false;
                }
                if (!name) {
                    alert("未填写用户姓名");
                    return false;
                }
                if (name.length > 8) {
                    alert("用户姓名长度超限");
                    return false;
                }
                if (lockState == null || lockState == '') {
                    alert("未选择锁定状态");
                    return false;
                }
            },
            success: function (res) {
                if (res.code == 0) {
                    alert("修改成功");
                    $('#tab').bootstrapTable('refresh');
                    $('#editWindow').modal('hide');

                } else {
                    alert(res.message);
                }
            }
        })
    }

    // 删除
    function remove(id) {
        if (confirm("确定要删除该条数据吗?")) {
            $.ajax('user/delete/' + id, {
                type: 'delete',
                success: function (res) {
                    if (res.code == 0) {
                        alert("删除成功");
                        // 刷新页面
                        $('#tab').bootstrapTable('refresh');
                    } else {
                        alert(res.message);
                    }
                }
            })
        }
    }

    // 批量删除
    function removeBatch() {
        //获取用户的选择
        var rows = $('#tab').bootstrapTable('getSelections');
        if (rows.length == 0) {
            alert("请选择要删除的数据");
        } else {
            if (!confirm("确定要删除数据吗?")) {
                return;
            }
            var ids = [];
            $.each(rows, function () {
                ids.push(this.id);
            })
            $.ajax('user/delete', {
                type: 'post',
                data: {
                    _method: 'delete',
                    ids: ids.join()
                },
                success: function (res) {
                    if (res.code == 0) {
                        alert("删除成功");
                        // 刷新页面
                        $('#tab').bootstrapTable('refresh');
                    } else {
                        alert(res.message);
                    }
                }
            })
        }
    }
</script>
</body>
</html>